<template>
    <div>
        <div class="wrap">
            <h1>{{ list.title }}</h1>
            <div v-if="!flag" class="pic">
                <ul :class="{ a1: !flag }" v-for="col in cols" :key="col.id">
                    <li v-for="item in col.imgs" :key="item.imgid">
                        <router-link :to="'/detail/' + item.imgid">
                            <img
                                :style="{
                                    height: (2.2 * item.H) / item.W + 'rem',
                                }"
                                v-lazy="
                                    'https:' +
                                    item.url +
                                    '?x-oss-process=image/resize,w_300/format,jpg'
                                "
                                src="http://img.lanrentuku.com/img/allimg/1212/5-121204193R0-50.gif"
                                alt
                            />
                        </router-link>
                    </li>
                </ul>
            </div>
            <div v-else class="pic">
                <ul v-for="col in cols" :key="col.id">
                    <li v-for="item in col.imgs" :key="item.imgid">
                        <router-link :to="'/detail/' + item.imgid">
                            <img
                                :style="{
                                    height: (3.5 * item.H) / item.W + 'rem',
                                }"
                                v-lazy="
                                    'https:' +
                                    item.url +
                                    '?x-oss-process=image/resize,w_300/format,jpg'
                                "
                                src="http://img.lanrentuku.com/img/allimg/1212/5-121204193R0-50.gif"
                                alt
                            />
                        </router-link>
                    </li>
                </ul>
            </div>
            <span @click="getMore()" v-if="show">查看更多</span>
        </div>
    </div>
</template>

<script>
export default {
    props: ["list"],
    data() {
        return {
            mylist: [],
            num: 1,
            flag: true,
            cols: [],
            count: 0,
            show: true,
        };
    },
    created() {
        this.mylist = this.list.templates;
        this.jiSuan(this.mylist[0].width, this.mylist[0].height);
        this.fenZu(this.flag);
        // console.log(this.list.id);
    },
    methods: {
        // 计算判断分几列
        jiSuan(w, h) {
            let res = parseInt(w) / parseInt(h) > 1.1;
            // console.log(res);
            return (this.flag = res);
        },
        // 图片分组插入到列中
        fenZu(a) {
            if (a) {
                if (!this.cols.length > 0) {
                    for (let i = 0; i < 2; i++) {
                        this.cols.push({
                            id: i,
                            h: 0,
                            imgs: [],
                        });
                    }
                }
            } else {
                if (!this.cols.length > 0) {
                    for (let i = 0; i < 3; i++) {
                        this.cols.push({
                            h: 0,
                            imgs: [],
                            id: i,
                        });
                    }
                }
            }
            this.mylist.forEach((value) => {
                this.cols.sort((a, b) => {
                    return a.h - b.h;
                });
                let h = parseInt(value.height);
                this.cols[0].h += h;
                this.cols[0].imgs.push({
                    url: value.designTemplateImageUrl,
                    W: parseInt(value.width),
                    H: h,
                    imgid: value.designTemplateId,
                });
            });

            if (this.cols[0].id != 0) {
                this.cols.reverse();
            }
        },
        // 查看更多
        async getMore() {
            this.num++;
            let res = await this.$fetch(
                `/solutionSubject/themeExtend/template.do?_dataType=json&_dataClientType=3&_dataClientType=3&client_type=40
                    &themeExtendId=${this.list.id}
                    &pageSize=6&pageNum=${this.num}`
            );
            this.count = res.body.data.count;
            this.mylist = this.mylist.concat(res.body.data.templates);
            this.cols = [];
            if (this.count <= this.mylist.length) {
                this.show = false;
            }
            this.fenZu(this.flag);
        },
    },
};
</script>

<style scoped lang="scss">
div {
    .wrap {
        width: 100%;
        padding-bottom: 0.5rem;
        h1 {
            text-align: center;
            font-size: 0.32rem;
            font-weight: 500;
            line-height: 1rem;
        }
        .pic {
            margin-top: 0.2rem;
            width: 100%;
            // background-color: skyblue;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            .a1 {
                width: 2.2rem;
            }
            ul {
                width: 3.5rem;
                // background-color: plum;
                li {
                    width: 100%;
                    overflow: hidden;
                    margin: 0.2rem 0;
                    border-radius: 0.1rem;
                    box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.3);
                    img {
                        display: block;
                        width: 100%;
                    }
                }
            }
        }
        span {
            display: block;
            width: 2.57rem;
            height: 0.69rem;
            color: #666;
            background-color: #f5f5f5;
            border-radius: 0.35rem;
            line-height: 0.69rem;
            border: 1px solid rgb(201, 201, 201);
            text-align: center;
            margin: 0.1rem auto;
        }
    }
}
</style>